<template>
	<div>
		<div>
			<SelectTimer>
				<template #default>
					<div class="flex items-center">
						<div class="ml-6px mr-6px">
							<SelectBox title="合约" :list="contractList"></SelectBox>
						</div>
						<div class="mr-6px">
							<SelectBox title="方向" :list="toList"></SelectBox>
						</div>
					</div>
					
				</template>
			</SelectTimer>
		</div>
		<el-table :data="tableData" style="width: 100%" class="contract-table">
			<el-table-column prop="orderId" label="订单号">
			</el-table-column>
			<el-table-column prop="coin" label="合约">
				<template #default="scope">
					<div class="pt-10px pb-10px">
						<p class="text-[14px] font-[300] mb-4px">{{ scope.row.coin }}</p>
						<p class="text-#B5B5B5 text-12px  rounded-4px w-36px text-center box-border">
							{{ scope.row.contract }}
						</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="time" label="时间">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<span class=" text-[14px] font-[400]">{{ scope.row.time }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="to" label="方向">

				<template #default="scope">
					<div class="pt-10px pb-10px" :class="{ 'text-#07B175': scope.row.to, 'text-#F34E5F': !scope.row.to }">
						{{ (scope.row.to ? '平空' : '开空') }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="avgPrice" label="成交均价">
			</el-table-column>
			<el-table-column prop="account" label="数量">
			</el-table-column>
			<el-table-column prop="commission" label="手续费">
			</el-table-column>
			<el-table-column prop="role" label="角色">
			</el-table-column>
			<el-table-column prop="profit" label="已实现盈亏">
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import SelectTimer from '../components/SelectTimer.vue';
import SelectBox from '../components/SelectBox.vue';
const tableData = ref<any[]>([
	{
		orderId:'1252521526',
		coin: 'BTC/USDT',
		contract: '永续',
		time: '2023-04-02 12:00:01',
		to: false,
		avgPrice:'0.0054660',
		account: '5.384010 USDT',
		commission: '5.384010 USDT',
		role:'吃单方',
		profit:'0.11229000 USDT'
	},
	{
		orderId:'1252521526',
		coin: 'BTC/USDT',
		contract: '永续',
		time: '2023-04-02 12:00:01',
		to: true,
		avgPrice:'0.0054660',
		account: '5.384010 USDT',
		commission: '5.384010 USDT',
		role:'吃单方',
		profit:'0.11229000 USDT'
	},	
	{
		orderId:'1252521526',
		coin: 'BTC/USDT',
		contract: '永续',
		time: '2023-04-02 12:00:01',
		to: false,
		avgPrice:'0.0054660',
		account: '5.384010 USDT',
		commission: '5.384010 USDT',
		role:'吃单方',
		profit:'0.11229000 USDT'
	}
])

const contractList = ref<any[]>([
	{
		label: '全部',
		value: 'all'
	},
	{
		label: 'BTC/USDT',
		value: 'BTC/USDT'
	},
	{
		label: 'ETH/USDT',
		value: 'ETH/USDT'
	},
	{
		label: 'TRX/USDT',
		value: 'TRX/USDT'
	}
])

const toList = ref<any[]>([
	{
		label: '全部',
		value: 'all'
	},
	{
		label: '开多',
		value: '开多'
	},
	{
		label: '开空',
		value: '开空'
	},
	{
		label: '平多',
		value: '平多'
	},
	{
		label: '平空',
		value: '平空'
	}
])
</script>

<style lang="scss" scoped>
.contract-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

}
</style>
